<template>
	<!-- 拨打电话 -->
	<view class="call-phone-container">
		<u-popup :show="phoneShow" round="20" mode="bottom" @touchmove.stop.prevent="moveHandle">
			<view class="phone-number">{{phoneNumber}}</view>
			<view class="call-phone" @click="handleCallPhoneNum">呼叫</view>
			<view class="cancel-content">
				<view class="cancel-text" @click="handleCancelCallPhone"> 
					<text class="text">取消</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script lang="ts" setup>
	import {ref} from 'vue'
	
	const phoneShow = ref(false)
	const phoneNumber = ref<string | number>('')
	const moveHandle = ()=> {
		return false
	}
	const handleShowPopue = (val: string | number)=> {
		phoneShow.value = true
		phoneNumber.value = val
	}
	const handleCallPhoneNum = ()=> {
		wx.makePhoneCall({
		  phoneNumber: phoneNumber.value //仅为示例，并非真实的电话号码
		})
	}
	const handleCancelCallPhone = ()=> {
		phoneShow.value = false
	}
	defineExpose({
		handleShowPopue
	})
</script>

<style lang="scss" scoped>
	.call-phone-container {
		// :deep(.u-popup) {
			.phone-number{
				padding: 42rpx 0 50rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #8091A4;
				border-bottom: 1rpx solid #D8D8D8;
			}
			
			.call-phone {
				padding: 32rpx 0 36rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				color: #333333;
			}
			
			.cancel-content {
				background-color: #F6F8FC;
				padding-top: 20rpx;
				box-sizing: border-box;
				
				.cancel-text {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					color: #333333;
					padding-top: 28rpx;
					box-sizing: border-box;
					background-color: #FFFFFF;
					padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
					padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
					.text{
						padding: 28rpx 0;
					}
				}
			}
		// }
	}
	
</style>